/* ### wrapper ### */
#spWrapper { display: flex; }
#spWindow { background-color: #eee; border: 1px solid rgb(52, 152, 219); flex: 1 1 auto; padding: 1px; }
html[dir="ltr"] #spWindow { margin-right: 40px; }
html[dir="rtl"] #spWindow { margin-left: 40px; }
#spSidebar { flex: 0 0 300px; }
.spBoundary { margin: 0 40px; }
.spInlineWrapper { display: inline-block; }

/* ### header ### */
#spHeader > .spBoundary { display: flex; flex-wrap: wrap; padding: 30px 0; }
#spLogo { flex: 0 0 50%; }
#spLogo > img { height: 40px; }
#spSearch { flex: 0 0 50%; }
#spSearchBox { border-width: 0; }
#spUser { flex: 0 0 50%; }
#spLogo, #spSearch { align-items: center; display: flex; }
#spSearch, #spUser { justify-content: flex-end; }

/* ### menu ### */
html[dir="ltr"] #spHeaderPanel ol.inlineList > li { margin-right: 0; }
html[dir="rtl"] #spHeaderPanel ol.inlineList > li { margin-left: 0; }
#spHeaderPanel ol.inlineList > li > a { align-items: center; display: flex; font-size: 14px; font-weight: 400; height: 50px; padding: 0 15px; }
#spHeaderPanel ol.inlineList > li.active > a::after { content: "\f107"; display: inline-block; font-family: FontAwesome; }
html[dir="ltr"] #spHeaderPanel ol.inlineList > li.active > a::after { margin-left: 5px; }
html[dir="rtl"] #spHeaderPanel ol.inlineList > li.active > a::after { margin-right: 5px; }
#spHeaderPanel ol.inlineList > li.active { position: relative; }
#spSubMenu { box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); padding: 3px 0; position: absolute; }
#spSubMenu > li > a { display: block; padding: 5px 20px; white-space: nowrap; width: 120px; }

/* ### navigation ### */
#spNavigation { font-size: 11px; padding: 7px 0; }
#spNavigation li:first-child { position: relative; }
#spNavigation li:first-child::after { content: "/"; display: inline-block; }
html[dir="ltr"] #spNavigation li:first-child::after { margin-left: 5px; }
html[dir="rtl"] #spNavigation li:first-child::after { margin-right: 5px; }

/* ### content ### */
#spContent { padding: 20px 0; }
.spHeadline { border-bottom: 1px solid #000; font-size: 1.2rem; font-weight: 300; margin: 20px 0; padding-bottom: 5px; }
.spHeadline:first-child { margin-top: 10px; }
#spContentBorder { border-bottom: 1px solid #000; margin: 10px 0; }
#spContentBorderInner { border-bottom: 1px solid #000; margin: 10px 0; }
.spContentContainer { background-color: #fff; border: 1px solid #000; margin: 10px 0; padding: 10px; }

/* ### tabular box ### */
#spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; }
#spTable th { border-bottom: 2px solid currentColor; font-size: 1.2rem; font-weight: 300; }
html[dir="ltr"] #spTable th { text-align: left; }
html[dir="rtl"] #spTable th { text-align: right; }
#spTable th, #spTable td { padding: 10px; }
#spTable tr:not(:last-child) > td { border-bottom: 1px solid #000; }

/* ### input ### */
#spInputDisabled { -webkit-text-fill-color: unset; }

/* ### button ### */
#spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; }
#spButtonPrimary { margin-top: 10px; }

/* ### editor ### */
#spEditorContent { border: 1px solid rgb(224, 224, 224); border-top-width: 0; height: 100px; }

/* ### dropdown ### */
#spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; }

/* ### footer box ### */
#spFooterBox > .spBoundary { display: flex; justify-content: space-between; padding: 15px 0; }
#spFooterBox .spFooterBoxItem { flex: 0 0 auto; width: calc(50% - 15px); /* work-around for IE which does not support calc() for flex-basis */ }
#spFooterBox .spFooterBoxHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }

/* ### footer ### */
#spFooter > .spBoundary { padding: 15px 0; }
#spFooter .spFooterHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
#spFooterCopyright > .spBoundary { padding: 15px 0; text-align: center; }

/* ### content sidebar ### */
#spContent > .spBoundary { display: flex; }
#spContentWrapper { flex: 1 1 auto; }
#spContentSidebar { flex: 0 0 250px; }
html[dir="ltr"] #spContentSidebar { margin-left: 20px; }
html[dir="rtl"] #spContentSidebar { margin-right: 20px; }
#spContentSidebar .spContentSidebarBox { padding: 20px; }
#spContentSidebar .spContentSidebarBox:not(:last-child) { margin-bottom: 20px; }
#spContentSidebar .spContentSidebarHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }

/* ### status messages ### */
#spStatus { display: flex; flex-wrap: wrap; justify-content: space-between; }
#spStatus > li { flex: 0 0 auto; width: calc(50% - 10px); /* work-around for IE which does not support calc() for flex-basis */ }
#spStatus > li:first-child { margin-bottom: 10px; }
#spStatus > li > div { padding: 5px 10px; }
html[dir="ltr"] #spStatus > li > div { border-left: 5px solid #000; }
html[dir="rtl"] #spStatus > li > div { border-right: 5px solid #000; }

/* ### wrapper sidebar ### */
.spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
.spColor { align-items: center; }
.spColor:not(:first-child) { margin-top: 5px; }
.spColorBox { background-color: #fff; border: 1px solid #ccc; padding: 1px; }
html[dir="ltr"] .spColorBox { margin-right: 10px !important; }
html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
.spColorBox > span { display: block; height: 24px; width: 24px; }
.spVariable, .spDescription { display: block; font-size: 12px; }
.spVariable { font-family: Consolas, Courier, monospace; }
.spApiVersion { color: #E65100; font-family: Consolas, Courier, monospace; font-size: 12px; }
#spSidebar .button { display: block; }
@media (min-width: 769px) {
	#spVariablesWrapper { position: -webkit-sticky; position: sticky; top: 60px; }
}

/* ### style region marker ### */
#stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; }
#stylePreviewRegionMarker.forceHide { display: none !important; }
#stylePreviewRegionMarkerBottom { height: 100%; }
#stylePreviewRegionMarkerBottom::after, #stylePreviewRegionMarkerBottom::before, #stylePreviewRegionMarker::after, #stylePreviewRegionMarker::before { border: 3px solid red; content: ""; display: block; height: 20px; position: absolute; width: 20px; }
#stylePreviewRegionMarker::after { border-width: 0 0 3px 3px; right: -20px; top: -20px; }
#stylePreviewRegionMarker::before { border-width: 0 3px 3px 0; left: -20px; top: -20px; }
#stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; }
#stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; }

@media (max-width: 768px) {
	#spSidebar .jsButtonSelectCategoryByClick, #spSidebar .jsButtonToggleColorPalette { display: none; }
}
@media (min-width: 769px) {
	#spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; }
	#spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; }
        
	/* ### click on area to select ### */
	#spWindow.spShowRegions { pointer-events: none; z-index: 5; }
	#spWindow.spShowRegions [data-region]:not(#spSubMenu) { position: relative; }
	#spWindow.spShowRegions [data-region]::before {
		background-color: rgba(242, 222, 222, .9);
		border: 2px dashed rgb(235, 204, 204);
		bottom: 0;
		content: "";
		cursor: pointer;
		display: block;
		left: 0;
		pointer-events: all;
		position: absolute;
		right: 0;
		top: 0;
		transition: background-color .12s linear;
		z-index: 10;
	}
	
	#spWindow.spShowRegions [data-region]:hover::before { background-color: rgba(242, 222, 222, 1); }
	
	#spWindow.spShowRegions [data-region]::after {
		color: rgb(169, 68, 66);
		content: attr(data-region);
		font-size: 12px !important;
		font-weight: 400 !important;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: 40;
	}
	
	#spWindow.spShowRegions [data-region="wcfHeader"]::after { left: 20px; transform: translateY(-50%); }
	#spWindow.spShowRegions [data-region="wcfContent"]::after { top: 20px; transform: translateX(-50%); }
	
	#spWindow.spShowRegions [data-region] [data-region] { z-index: 20; }
	#spWindow.spShowRegions [data-region] [data-region]::before { z-index: 30; }
	#spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; }
	#spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; }
        
        #spWindow.spColorPalette { display: none; }
	#spWindow.spColorPalette + #spSidebar { flex: 1; }
	#spWindow.spColorPalette + #spSidebar #spVariablesWrapper { position: static !important; column-count: auto; column-width: 300px; }
        #spWindow.spColorPalette + #spSidebar .spSidebarBox { break-inside: avoid; display: block !important; page-break-inside: avoid; position: relative; }
	#spWindow.spColorPalette + #spSidebar .spSidebarBox[data-category="none"], #spWindow.spColorPalette + #spSidebar .spSidebarBox.spSidebarBoxCategorySelection { display: none !important; }
	#spWindow.spColorPalette + #spSidebar .spSidebarBox::before { color: rgb(125, 130, 135); content: attr(data-category); display: block; font-family: Consolas, Courier, monospace; font-size: 1.2rem; margin-bottom: 10px; }
}
